<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>canvas</title>
	<style type="text/css">
		#canvas {
			-webkit-box-shadow: 3px 3px 5px black;
			box-shadow: 3px 3px 5px black;
		}
	</style>
</head>
<body>
	<canvas id="canvas" width="500" height="500">您的浏览器不支持canvas，请换一个</canvas>
</body>
<script type="text/javascript">
	//获取canvas标签
	var canvas = document.getElementById("canvas");
	//获取上下文 
	var ctx = canvas.getContext("2d");

	var du = 0.45;

	function createHeart() {
		du += 0.1;
		if (du >0.8) {
			du = 0;
		}
		ctx.clearRect(0,0,500,500);
		ctx.beginPath();
		//起点
		ctx.moveTo(200,120);
		//三次贝塞尔
		ctx.bezierCurveTo(100,50,50,160,200,300);

		var gradient = ctx.createLinearGradient(100,50,350,300);
		gradient.addColorStop(du,"hotpink");
		gradient.addColorStop(du+0.1,"pink");
		gradient.addColorStop(du+0.2,"hotpink");

		ctx.fillStyle = gradient;
		ctx.fill();

		ctx.beginPath();
		//起点
		ctx.moveTo(200,120);
		//三次贝塞尔
		ctx.bezierCurveTo(300,50,350,160,200,300);
		ctx.fillStyle = gradient;
		ctx.fill();
	}
	createHeart();
	setInterval(createHeart,90);
</script>
</html>








